<div class="page-header" ng-if="ctrl.pageReady">
    <h1>{{ctrl.endpoint.name}}<a ng-click="ctrl.gotoDashboard(ctrl.endpoint)"><i ng-class="icon"
                                                                                 class="icon-gf icon-gf-dashboard"
                                                                                 bs-tooltip="'Go to worldPing: Summary </br>dashboard for this endpoint'"
                                                                                 data-delay='{"show":"750", "hide":"0"}'></i></a>
    </h1>
    <div class="gf-form wp-tag-margin--bottom">
        <span class="gf-form-label width-6">Tags:</span>
        <bootstrap-tagsinput ng-model="ctrl.endpoint.tags" tagclass="label rt-label-tag" placeholder="New Tag"
                             on-tags-updated="ctrl.tagsUpdated()"></bootstrap-tagsinput>
    </div>

    <div class="page-header-tabs">
        <ul class="gf-tabs">
            <li class="gf-tabs-item">
                <a class="gf-tabs-link active"
                   href="plugins/raintank-worldping-app/page/endpoint-details?endpoint={{ctrl.endpoint.id}}">
                    Status
                </a>
            </li>
            <li class="gf-tabs-item" ng-if="ctrl.isOrgEditor">
                <a class="gf-tabs-link"
                   href="plugins/raintank-worldping-app/page/endpoint-config?endpoint={{ctrl.endpoint.id}}">
                    Configuration
                </a>
            </li>
        </ul>
    </div>
</div>

<section class="card-section card-list-layout-list" layout-mode ng-if="ctrl.pageReady">
    <ol class="card-list">
        <li class="card-item-wrapper" ng-repeat="checktype in ctrl.checktypes">
            <div class="card-item pointer" ng-click="ctrl.gotoDashboard(endpoint, checktype.name)">
                <div class="card-item-header card-item-header--wp-icons card-item-header-action">
                    <a ng-show="ctrl.getMonitorByTypeName(checktype.name).enabled"
                       ng-click="$event.stopPropagation();ctrl.gotoDashboard(endpoint, checktype.name)">
                        <i ng-class="icon" class="icon-gf icon-gf-dashboard"
                           bs-tooltip="'Go to worldPing Endpoint: </br>dashboard for {{checktype.name}}'"
                           data-delay='{"show":"750", "hide":"0"}'></i>
                    </a>
                    <a href="plugins/raintank-worldping-app/page/endpoint-config?endpoint={{ctrl.endpoint.id}}&check={{checktype.name|lowercase}}"
                       ng-if="ctrl.isOrgEditor" ng-click="$event.stopPropagation();">
                        <i ng-class="icon" class="icon-gf icon-gf-settings" bs-tooltip="'Configure {{checktype.name}}'"
                           data-delay='{"show":"750", "hide":"0"}'></i>
                    </a>
                </div>
                <div class="card-item-body">
                    <figure class="card-item-figure health">
                        <img ng-src="public/plugins/raintank-worldping-app/img/{{ctrl.monitorStateClass(checktype.name)}}.svg"
                             style="width: 40px; height: 40px;">
                    </figure>
                    <div class="card-item-details endpoint-detail-flex-grow">
                        <div class="card-item-name">
                            <div class="endpoint-detail-flex-container">
                                <div class="endpoint-name">
                                    <a ng-show="ctrl.getMonitorByTypeName(checktype.name).enabled"
                                       href="/dashboard/db/{{checktype.dashName}}var-endpoint={{ctrl.endpoint.slug}}&var-probe=All"
                                       bs-tooltip="'Go to {{checktype.name}} dashboard'"
                                       data-delay='{"show":"750", "hide":"0"}' ng-click="$event.stopPropagation();">{{checktype.name}}</a>
                                    <a ng-show="!ctrl.getMonitorByTypeName(checktype.name).enabled"
                                       href="plugins/raintank-worldping-app/page/endpoint-config?endpoint={{ctrl.endpoint.id}}&check={{checktype.name|lowercase}}"
                                       class="disabled" ng-click="$event.stopPropagation();">{{checktype.name}}</a>
                                    <div class="endpoint-name">
										<span ng-show="ctrl.getMonitorByTypeName(checktype.name).enabled">
											<span class="checkStatus {{ctrl.monitorStateClass(checktype.name)}}">{{ctrl.monitorStateTxt(checktype.name)}}</span>
											<span class="checkTime">{{ctrl.stateChangeStr(checktype.name)}}</span>
										</span>
                                        <span ng-show="!ctrl.getMonitorByTypeName(checktype.name).enabled">
											<a href="plugins/raintank-worldping-app/page/endpoint-config?endpoint={{ctrl.endpoint.id}}&check={{checktype.name|lowercase}}"
                                               ng-if="ctrl.isOrgEditor" class="freqMsg disabled"
                                               ng-click="$event.stopPropagation();">Not enabled, configure now.</a>
											<span class="freqMsg" ng-if="!ctrl.isOrgEditor">Not Enabled.</span>
										</span>
                                    </div>
                                </div>
                                <div class="endpoint-alerting"
                                     ng-show="ctrl.getMonitorByTypeName(checktype.name).enabled">
                                    <div ng-if="!ctrl.getMonitorByTypeName(checktype.name).healthSettings.notifications.enabled">
										<span class="endpoint-alerting-status not-enabled"><i ng-class="icon"
                                                                                              class="icon-gf icon-disabled"></i>
										<a href="plugins/raintank-worldping-app/page/endpoint-config?endpoint={{ctrl.endpoint.id}}&check={{checktype.name|lowercase}}"
                                           class="freqMsg disabled" ng-if="ctrl.isOrgEditor"
                                           ng-click="$event.stopPropagation();">Alerting not enabled,<br>configure now</a>
										<span ng-if="!ctrl.isOrgEditor">Alerting not enabled.</span>
										</span>
                                    </div>
                                    <div ng-if="ctrl.getMonitorByTypeName(checktype.name).healthSettings.notifications.enabled">
										<span class="endpoint-alerting-status">
											<i ng-class="icon" class="icon-gf icon-gf-alert"></i>
											<a href="plugins/raintank-worldping-app/page/endpoint-config?endpoint={{ctrl.endpoint.id}}&check={{checktype.name|lowercase}}"
                                               ng-if="ctrl.isOrgEditor" ng-click="$event.stopPropagation();">Alerting Enabled</a>
											<span ng-if="!ctrl.isOrgEditor">Alerting Enabled</span>
											<span class="endpoint-alerting-recipients"
                                                  bs-tooltip="'{{ctrl.getNotificationEmailsAsString(checktype.name)}}'"
                                                  data-delay='{"show":"750", "hide":"0"}'><i ng-class="icon"
                                                                                             class="icon-gf icon-gf-users"></i>{{ctrl.getNotificationEmails(checktype.name).length}} recipients</span>
										</span>
                                    </div>
                                </div>
                                <div>
                                    <div ng-if="ctrl.getMonitorByTypeName(checktype.name).enabled">
                                        <div class="frequency">
                                            <span class="freqMsg"><span class="emphasis-word">Events - </span>&nbsp;Last check from&nbsp;</span>{{ctrl.getProbesForCheck(checktype.name).length}}<span
                                                class="freqMsg">&nbsp;probes&nbsp;</span><a
                                                ng-click="$event.stopPropagation(); ctrl.gotoEventDashboard(ctrl.endpoint, checktype.name)"
                                                bs-tooltip="'Go to worldPing: Events </br>dashboard for {{checktype.name}}'"
                                                data-delay='{"show":"750", "hide":"0"}'><i
                                                class="frequency fa fa-fw fa-external-link"></i></a>
                                        </div>
                                        <rt-check-health check="ctrl.getMonitorByTypeName(checktype.name)"
                                                         ctrl="ctrl"></rt-check-health>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </a>
        </li>
    </ol>
</section>
